<template>
  <hips-view class="home" header-height="48" footer-height="48">
    <div slot="header" class="header">
      <hips-nav-bar theme="default">
        <!-- 搜索框区start -->

        <div slot="center" class="input">
          <img src="../assets/images/search.svg" alt class="search" />

          <input
            ref="test"
            v-model="searchValue"
            type="text"
            placeholder="搜索操作员"
            @focus="inputFocus"
            @blur="inputBlur"
            @keyup.enter="search"
          />

          <img src="../assets/images/clearsearch.svg" alt class="clearsearch" @click="cancleSearch" />
        </div>

        <!-- 搜索框区end -->

        <div slot="right" @click="$router.backPage()">取消</div>
      </hips-nav-bar>
    </div>

    <div style="margin-top:10px">
      <!-- 历史记录区start -->

      <div v-if="showHistory">
        <div class="history-clear">
          <span>历史记录</span>

          <img src="../assets/images/ashbin.svg" alt @click="clearHistory" />
        </div>

        <div>
          <div v-if="!history.length" class="his-none">
            <span>暂无数据</span>
          </div>

          <div v-else class="his-content">
            <span
              v-for="(item, index) in history"
              :key="index"
              @click="searchHistory(item)"
            >{{ item }}</span>
          </div>
        </div>
      </div>

      <!-- 历史记录区end -->
    </div>

    <!-- 分页加载区start -->

    <div class="content demo-scroll" style="padding-top:10px;height:calc(100vh - 13.333vw)">
      <hips-scroll
        v-if="!showHistory"
        ref="scroll"
        :data="[orderList]"
        :scroll-options="scrollOption"
        @pulling-down="loadRefresh"
        @pulling-up="loadMore"
      >
        <!-- 展示列表区start -->

        <div class="search-result">
          <div class="search-title">
            操作员
            <span>(共{{ sum }}人)</span>
          </div>

          <div
            v-for="(order, index) of orderList"
            :key="index"
            class="result-content"
            @click="chooseValue(order)"
          >
            <p class="type">
              <img :src="order.pictureUrl?order.pictureUrl:img" alt class="type-img" />

              <span>{{ order.workerName }}</span>
            </p>
          </div>
        </div>

        <!-- 展示列表区end -->
      </hips-scroll>
    </div>

    <!-- 分页加载区end -->
  </hips-view>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: ''
      }
    };
  },
  created: function() {},
  methods: {
    // 聚焦

    inputFocus() {
      this.getHistorys();

      this.showHistory = true;
    },

    // historys存入localStorage

    setHistorys() {
      // 搜索框有内容且不在历史记录里

      let vm = this;

      if (vm.searchValue && vm.searchValue !== '' && vm.searchValue !== ' ' && vm.history.indexOf(vm.searchValue) === -1) {
        let Arr = Array.from(new Set(vm.history));

        vm.history = [vm.searchValue, ...Arr];
      }

      // 历史记录只保存6条

      if (vm.history && vm.history.length && vm.history.length > 6) {
        vm.history = vm.history.slice(0, 6);
      }
      localStorage.setItem('historys', JSON.stringify(vm.history));
    },

    // historys获取localStorage

    getHistorys() {
      let history = localStorage.getItem('historys');

      if (history) {
        this.history = JSON.parse(history);
      }
    },

    // 失去焦点

    inputBlur() {
      this.setHistorys();
      this.orderList = [];

      this.page = 0;

      this.getWorkerApi();

      this.showHistory = false;
    },

    // 回车

    search() {
      // 失焦

      this.$refs.test.blur();
    },

    // 删除历史记录

    clearHistory() {
      this.history = [];

      localStorage.removeItem('historys');
    }
  }
};
</script>

<style scoped>
</style>
